<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		
    </script>
</head>
<body>
	<style type="text/css">

    .load2 {
        position: absolute;
        width:200px;
        height:160px;
         background: url('') no-repeat;
        margin-left:-96px;
        margin-top:-100px;
        left:50%;
        top:70%;
        animation:small .8s infinite;
        background-position: center;
    }

    @keyframes small {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(.4);
        }
        100% {
            transform: scale(1);
        }
    }

    .load {
        position: absolute;
        left:50%;
        top:50%;
        background: url('img/loading.png');
        height:100px;
        width:100px;
        margin-left:-50px;
        margin-top:-50px;
        animation:test 4.5s steps(6) infinite,updown .8s infinite;
        /*-webkit-animation:test 3.5s steps(6) infinite;*/
    }

    @keyframes test {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 0 600px;
        }
    }

    @keyframes updown{
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-50px);
        }
        100% {
            transform: translateY(0px);
        }
    }
</style>
<div class="load"></div>
<div class="load2"></div>
    
</body>
</html>